<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>高级图表生成器（CSV / JSON）</title>
  <link rel="stylesheet" href="/static/styles.css" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <div id="loader">
    <div class="spinner"></div>
    <div id="loaderText"></div>
  </div>

  <button id="themeToggle">🌓</button>

  <div class="container">
    <h1>📊 高级图表生成器</h1>
    <p class="subtitle">支持 CSV / JSON 文件 + 自然语言描述 | 拖拽上传 | 明暗主题</p>

    <div class="card upload-section">
      <h3>📁 上传数据文件</h3>
      <p class="note">支持多个文件或整个文件夹（可拖拽上传）</p>

      <div id="dropZone">
        <p>拖拽文件到此处或点击下方按钮</p>
      </div>

      <input type="file" id="dataFiles" accept=".csv,.json" multiple webkitdirectory />
      <button id="uploadBtn">选择文件</button>
    </div>

    <div class="card file-list-section">
      <h3>📄 已上传文件（可多选）</h3>
      <ul id="uploadedFilesList"></ul>
    </div>

    <div class="card generate-section">
      <form id="form">
        <label for="description">📝 图表描述（自然语言）</label>
        <textarea id="description" placeholder="例如：绘制2010到2020年两文件中降水量对比柱状图"></textarea>
        <button id="generateBtn" type="submit">生成图表</button>
      </form>
    </div>

    <div id="error"></div>

    <div class="card button-row">
      <button id="downloadPNG">下载 PNG</button>
      <button id="downloadSVG">下载 SVG</button>
      <button id="copySpec">复制 Vega-Lite JSON</button>
      <button id="downloadSpec">下载 JSON 配置</button>
    </div>

    <div id="vis" class="card"></div>
  </div>

  <script src="/static/script.js"></script>
</body>
</html>
